<template>
  <div id="mylist">

    <!--    <form-preview :header-label="$t('message.projectItem')" :header-value="projectName" :body-items="listArray"
                      :footer-buttons="buttons1">

        </form-preview>-->

    <!-- <group>
       <popup-picker v-show=false title="111" :data="list1" v-model="value" ref="picker"
                     @on-hide="onHide"></popup-picker>
     </group>-->

    <div v-transfer-dom>
      <actionsheet v-model='showMore' :menus="list1" ref="picker" @on-click-menu="click" show-cancel>
      </actionsheet>
    </div>

    <div>
      <group>

        <cell class="title" :title="$t('message.projectItem')" is-link :value="projectName" :border-intent="false" :arrow-direction="showContent001 ? 'up' : 'down'" @click.native="changeButton">
        </cell>

        <div class="list-box" ref="box">
          <div v-for="(item,index) in  listArray" :key='index' class="listbox1">
            <div class="listbox2">

              <div class="listbox3" v-if="!(typeof(item.value)=='object')">
                <label class="fl">{{item.label}}</label>
                <span class="fr">{{item.value}}</span>
              </div>

              <div v-if="typeof(item.value)=='object'" class="listbox3">
                <label class="fl">{{item.label}}</label>
                <ul class="clearfix">
                  <li v-for="(item1,index1) in  item.value" :key='index1'>
                    <img :src="'//img.ihuipao.cn/'+item1">
                  </li>
                </ul>
              </div>

            </div>

          </div>
        </div>

        <!-- 更多操作按钮 -->
        <!-- <cell @click.native="popu" class="footer" :title="$t('message.moreoperations')"></cell> -->
        <!--     <x-button v-if="state==0" @click.native="pay" mini type="primary" class="refundBtn">
               支付
             </x-button>

             <x-button v-if="state==1" @click.native="_getRefund" mini type="primary" class="refundBtn">
               退款
             </x-button>

             <x-button v-if="state==2" @click.native="_refundProgress" mini type="primary" class="refundBtn">
               查看退款详情
             </x-button>-->
      </group>

      <group>
        <cell @click.native="click(null,null,item1)" is-link v-for='(item1,index1) in  list1' :key='index1'>
          <span slot="title">{{item1}}</span>
        </cell>

      </group>
    </div>

    <div v-transfer-dom>
      <confirm v-model="show" title="重要提示" @on-confirm="refund">
        <p style="text-align:center;">
          {{$t('message.tuikuan1')}}，{{$t('message.tuikuan2')}}{{this.amount}}{{$t('message.tuikuan3')}}。 {{$t('message.tuikuan4')}}
        </p>
        <group class="border-left border-right">
          <x-input class="" placeholder="请输入证件号" v-model="idnum2"></x-input>
        </group>
      </confirm>
    </div>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
import {
  FormPreview,
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Badge,
  XButton,
  Confirm,
  ConfirmPlugin,
  XInput,
  PopupPicker,
  Timeline,
  TimelineItem,
  Actionsheet,
  TransferDomDirective as TransferDom
} from "vux";
import { myApply } from "@/api/myapply.js";
import { getForm } from "@/api/getForm.js";
import { sendPay } from "@/api/sendPay.js";
import { refund } from "@/api/refund.js";
import { orderQuery } from "@/api/orderQuery.js";
import { indexedDB } from "@/api/indexedDB.js";
import { enCountryData } from "@/common/locales/enCountryData1.js";
import { countryData } from "@/common/locales/countryData1.js";
import { cityData } from "@/common/locales/cityData.js";
let mycountryData;
if (document.querySelector("html").lang == "en") {
  mycountryData = enCountryData;
} else {
  mycountryData = countryData;
}

//let clock1 = 1
var isMini = false;
//判断环境 是否在小程序
var checkIsFromMiniProgram = function() {
  wx.miniProgram.getEnv(function(res) {
    console.log("minprogram:" + res.miniprogram); // true
    //  alert(JSON.stringify(res));
    if (res.miniprogram === true) {
      isMini = true;
      // alert('isMiniprogram:' + res.miniprogram);
    } else {
      isMini = false;
      // alert("========公众号");
    }
  });
};

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import qs from "qs";
import { setTimeout } from "timers";
Vue.use(VueAxios, axios);
Vue.use(ConfirmPlugin);

export default {
  props: ["msg"],
  data() {
    return {
      lists: [],
      eventData: {},
      countTime: 0,
      refundable: 0,
      payable: 0,
      editable: 0,
      showMore: false,
      list1: [],
      buttons1: [
        {
          style: "primary",
          text: `更多操作`,
          onButtonClick: () => {
            this.$refs.picker.onClick();
          }
        }
      ],
      buttons1: [],
      idnum: "",
      idnum2: "",
      show: false,
      name: "",
      projectName: "",
      showContent001: false,
      showContent002: false,
      more: this.$t("message.more"),
      less: this.$t("message.less"),
      listArray: [], //需要渲染的列表
      eventId: 0, //赛事id
      myKey: "",
      amount: "",
      disabled: false,
      buttonStr: "退款",
      state: 0, //订单状态  0 下订单未支付--显示支付  1下订单已支付--显示退款 2下订单已支付已退款--显示查看退款详情
      orderid: "",
      showTime: false,
      value: [],
      key: "",
      eventState: "",
      eventData: {}
    };
  },
  created() {
      
    //console.log('xxx')
    //console.log(this.msg)
    //console.log("---");
    //console.log(this.lists);
    let _this = this;

    this.myKey = this.msg._key;

    //获取赛事id
    this.eventId = this.msg.eventid;

    this.name = this.msg.name;

    this.idnum = this.msg.idnum;
    //mock
    this.editable = this.msg.editable;

    this.payable = this.msg.payable;

    this.lists = this.msg;
    //this.eventData=this.msg.event

    //mock
    //this.payable=1
    //mock

    this.key = this.msg._key;
    this.state1 = this.msg.state;
    if (typeof wx !== "undefined") {
      checkIsFromMiniProgram();
    }

    /*console.warn(this.lists)*/

    // console.log(this.eventId)
    // console.log(this.index)
    // console.log(this.lists)
    //this._getForm()
    setTimeout(() => {
      _this.getMessageApi1();
    }, 0);

    //
  },
  methods: {
    click(menuKey, menuItem, text) {
      var _this = this;

      if (!!text) {
        menuItem = text;
      }

      if (menuItem == _this.$t("message.detailsofrefunds")) {
        //查看退款进度
        this._refundProgress();
      } else if (menuItem == _this.$t("message.refund1")) {
        //获取退款规则
        this._getRefund();
      } else if (menuItem == "查看详情") {
        //查看详情
        if (this.showContent001 == true) {
          return;
        }
        this.changeButton();
      } else if (menuItem == "删除该报名") {
        this.$vux.confirm.show({
          title: "删除报名",
          content:
            "每个证件号（每名选手）至多可以删除一次报名，删除报名后，可以重新报名任何其它项目，您当前项目的报名资格将不再保留。",
          // 组件除show外的属性
          onCancel() {},
          onConfirm() {
            //console.log(_this.key)
            //console.log(_this.idnum)
            //return
            _this.axios
              .post(
                `${window.host}registration/del`,
                qs.stringify({
                  id: _this.key,
                  idnum: _this.idnum
                })
              )
              .then(response => {
                if (response.data.code == "200") {
                  _this.$vux.toast.show({
                    type: "success",
                    text: "删除成功",
                    onHide() {
                      indexedDB(
                        "IDNumber",
                        "remove",
                        this.RACEID,
                        "",
                        function(a) {}.bind(this)
                      );
                    }
                  });
                } else {
                  //console.log(response)
                  _this.$vux.toast.show({
                    type: "warn",
                    text: response.data.msg
                  });
                }
              });
          }
        });
        // _this.$router.push({
        //   name: "declare",
        //   params: { type: "del", key: _this.key, id: _this.idnum }
        // });
      } else if (menuItem == "修改报名资料") {
        this.goEdit();
      } else if (menuItem == "历史成绩") {
        _this.$router.push({
          name: "historyScore",
          params: { type: "del", key: _this.key, id: _this.idnum }
        });
      } else {
        //console.log(this.eventData)
        //_this.eventData.cutdown=5
        if (!!_this.eventData.cutdown && _this.eventData.cutdown <= -1) {
          _this.countTime = _this.eventData.cutdown;

          let countDown = setInterval(() => {
            this.$vux.loading.show({
              text: _this.countTime
            });
            _this.countTime--;
            if (_this.countTime <= 0) {
              clearInterval(countDown);
              this.$vux.loading.hide();
              //this.pay()
            }
          }, 1000);

          //            setTimeout(()=>{
          //              this.$vux.loading.hide()
          //            },_this.eventData.cutdown*1000)
        } else {
          this.pay();
        }
      }
    },
    goEdit() {
      //修改报名资料
      this.$router.push({
        name: "modify",
        params: {
          eventid: this.eventId,
          idnum: this.idnum,
          projectName: this.projectName,
          state: this.state1,
          eventState: this.eventState
        }
      });
    },
    onHide(type) {
      let _this = this;
      //console.log('on hide', type)
      if (this.value == _this.$t("message.detailsofrefunds")) {
        this._refundProgress();
      } else if (this.value == _this.$t("message.gopay")) {
        this.pay();
      } else if (this.value == _this.$t("message.refund1")) {
        this.refund();
      }
    },
    popu() {
      this.showMore = true;
    },
    checkId() {
      return {
        valid: this.idnum2 === this.idnum,
        msg: this.$t("message.idnumberisinconsistent")
      };
    },
    //showConfirm
    showConfirm() {
      this.show = true;
    },
    //去支付
    pay() {
      //console.log("支付");
      var _this = this;
      if (isMini == true) {
        if (this.lists.payable != 1) {
          return;
        }

        sendPay(`${window.host}registration/pay`, {
          //raceid: this.raceid,
          id: this.myKey
        }).then(response => {
          if (response.data.code == "200") {
            let orderid = response.data.data.url.replace(
              "https://ihuipao.cn/pay/show/",
              ""
            );

            let openid = window.localStorage.getItem("openid");
            //let orderid = this.lists.orderid;
            axios
              .post(
                `${window.host}api/miniprogram/pay`,
                qs.stringify({
                  orderid: orderid,
                  openid: openid,
                  app: "registration"
                })
              )
              .then(
                response => {
                  if (response.data.code == "200") {
                    var payParam = {
                      appId: response.data.data.appId,
                      nonceStr: response.data.data.nonceStr,
                      package: response.data.data.package,
                      signType: response.data.data.signType,
                      timeStamp: response.data.data.timeStamp,
                      paySign: response.data.data.paySign,
                      _key: this.key
                    };

                    var url =
                      "/pages/wxpay/wxpay?payParam=" +
                      encodeURIComponent(JSON.stringify(payParam));
                    wx.miniProgram.navigateTo({
                      url: url
                    });
                  }
                },
                error => {
                  console.log(error);
                }
              );
          }
        });

        //
      } else {
        sendPay(`${window.host}registration/pay`, {
          id: this.myKey
        }).then(response => {
          if (response.data.code == "200") {
            window.location.href = response.data.data.url;
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
      }
    },
    //查看退款进度
    _refundProgress() {
      refund(`${window.host}refund/query`, {
        id: this.myKey,
        idnum: this.idnum,
        json: 1
      }).then(response => {
        if (response.data.code == "200") {
          //console.log(response.data.data)
          indexedDB(
            "refundInfo",
            "set",
            this.RACEID,
            response.data.data,
            function() {}
          );
          this.$router.push("/timeline");
        } else {
          //console.log(response)
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },
    //退款
    refund() {
      if (this.idnum2 == "") {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumbercannotbeempty")
        });
        return;
      }

      if (this.idnum !== this.idnum2) {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumberisinconsistent")
        });
        return;
      }

      refund(`${window.host}refund/create`, {
        id: this.myKey,
        idnum: this.idnum2
      }).then(response => {
        if (response.data.code == "200") {
          this.$vux.toast.show({
            type: "success",
            text: this.$t("message.refundsuccessfully")
          });
          history.go(0);
        } else {
          //console.log(response)
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },

    //退款规则
    _getRefund() {
      /* this.$vux.loading.show({
         text: '退款中'
         })*/
      /*   if (this.state == 0) {
         return
         }*/
      let _this = this;

      getForm(`${window.host}refund/rule`, {
        //eventid: this.eventId,
        id: this.key
      }).then(function(response) {
        if (response.data.code == "200") {
          _this.eventData = response.data.data;
          _this.amount = response.data.data.amount;
          _this.show = true;
          _this.$router.push({
            name: "declare",
            params: {
              type: "refund",
              key: _this.key,
              id: _this.idnum,
              amount: _this.amount
            }
          });
        } else {
          //_this.$router.push({name: 'declare', params: {type: 'refund', key: _this.key, id: _this.idnum,amount:_this.amount}})
          _this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
        /*_this.$vux.loading.hide()*/
      });
    },
    //订单查询
    _orderQuery() {
      if (this.state < 2) {
        return;
      }
      orderQuery(`${window.host}order/query`, {
        id: this.myKey,
        idnum: this.idnum,
        json: 1
      });
    },
    getMessageApi1() {
      var _this = this;
      //console.log(_this.msg)

      _this.eventState = _this.msg.event.state;
      _this.eventData = _this.msg.event;
      //console.log("--=-=-=");
      //console.log(_this.lists);
      //console.log(_this.eventData);

      //console.log(_this.eventData)

      //console.log('---')
      //console.log(response1.data.data)
      //console.log(_this.evnetSate)
      //console.log(response1.data.data.state)

      _this.refundable = _this.eventData.refundable;

      _this.projectName = _this.eventData.name;

      _this.form = _this.eventData.form;
      //console.log('222222')
      //console.log(_this.form)

      /*this.list1.push('历史成绩')*/
      //按钮逻辑
      if (
        _this.lists.pay_at === "" ||
        typeof _this.lists.pay_at === "undefined" ||
        (_this.lists.pay_at == null &&
          (typeof _this.lists.refundid == "undefined" ||
            _this.lists.refundid === 0))
      ) {
        //显示支付
        _this.state = 0;
        //                if (_this.payable == 1) {
        //                  //可以支付
        //                  //console.log(_this.eventData)
        //                  //console.log(_this.eventData.paystate)
        //
        //
        //
        //                  //paystate，有四种状态：unstart，未开放，finish已结束，close，关闭，opening，开放中。
        //                  //remain，剩余名额数，当paystate状态为opening的时候，展示该字段。
        //                  //如果该数>=0，显示还有**个名额
        //                  //如果<0，显示已额满，有abs(remain)个人在候补。
        //
        //                } else if (_this.payable == 0) {
        //                  //不支付
        //                }

        if (_this.eventData.paystate == "unstart") {
          _this.list1.unshift("去支付(未开放)");
        } else if (_this.eventData.paystate == "finish") {
          _this.list1.unshift("去支付(已结束)");
        } else if (_this.eventData.paystate == "close") {
          _this.list1.unshift("去支付(已关闭)");
        } else if (_this.eventData.paystate == "opening") {
          if (_this.eventData.remain >> 0 >= 0) {
            // _this.list1.unshift(
            //   "去支付(开放中),有" + Math.abs(_this.eventData.remain) + "个名额"
            // );
            _this.list1.unshift("去支付(开放中)");
          } else if (_this.eventData.remain >> 0 < 0) {
            // _this.list1.unshift(
            //   "去支付(开放中),已额满有" +
            //     Math.abs(_this.eventData.remain) +
            //     "个人在候补"
            // );
            _this.list1.unshift("去支付(已额满)");
          } else {
            _this.list1.unshift(_this.$t("message.gopay"));
          }
        }

        if (_this.pay_at == null) {
          //未支付
          _this.list1.push("删除该报名");
        }

        _this.value = [_this.$t("message.gopay")];
        //隐藏查看详情
        //_this.list1.push(_this.$t("message.seedetails"));
        //历史成绩
      } else if (
        ((_this.lists.pay_at || _this.lists.pay_at !== "") &&
          typeof _this.lists.refundid == "undefined") ||
        _this.lists.refundid == 0
      ) {
        //显示退款
        _this.state = 1;
        if (_this.refundable != 1) {
          //_this.list1.push(_this.$t("message.seedetails"));
        } else {
          _this.list1.push(_this.$t("message.refund1"));
          //_this.list1.push(_this.$t("message.seedetails"));
          _this.value = [_this.$t("message.refund1")];
        }
      } else if (
        ((_this.lists.pay_at || _this.lists.pay_at !== "") &&
          typeof _this.lists.refundid !== "undefined") ||
        _this.lists.refundid !== 0
      ) {
        //显示退款详情
        _this.state = 2;
        _this.list1.push(_this.$t("message.detailsofrefunds"));
        //_this.list1.push(_this.$t("message.seedetails"));
        _this.list1.push("删除该报名");
        _this.value = [_this.$t("message.detailsofrefunds")];
      }

      //console.log(_this.editable)
      if (_this.editable) {
        _this.list1.push("修改报名资料");
      }

      //console.log(_this.list1)

      //默认展开
      //alert(1);
      _this.changeButton();
      //alert(2)

      for (let key in _this.lists) {
        //过滤掉不需要的属性
        if (key === "created_at") {
        } else if (key === "created_at") {
        } else if (key === "deleted_at") {
        } else if (key === "bib") {
          //常规属性写死
          if (_this.lists[key]) {
            _this.listArray.push({
              label: _this.$t("message.participationnumber"),
              value: _this.lists[key]
            });
          }
          //_this.listArray.push({label: '参赛号', value: '未分配'})
        } else {
          //自定义属性的处理

          _this.form.fields.forEach(function(item, index) {
            if (key === item.name) {
              if (key === "country") {
                let national = _this.lists.national;
                mycountryData[0].forEach(function(item, index) {
                  if (national == item.value) {
                    national = item.name;
                  }
                });
                //国籍
                _this.listArray.push({
                  label: _this.$t("message.national"),
                  value: national
                });

                //国家
                let country = _this.lists.country;
                if (country) {
                  mycountryData[0].forEach(function(item, index) {
                    if (country == item.value) {
                      country = item.name;
                      return;
                    }
                  });
                }

                _this.listArray.push({
                  label: item.label,
                  value: country
                });
              }

              if (key === "city") {
                //省
                let province = _this.lists.province;
                //城市
                let city = _this.lists.city;
                //区
                let area = _this.lists.area;
                //地址字符串
                let address = "";

                if (province) {
                  cityData.forEach(function(item, index) {
                    if (province == item.value) {
                      province = item.name;
                      return;
                    }
                  });
                }

                if (city) {
                  cityData.forEach(function(item, index) {
                    if (city == item.value) {
                      city = item.name;
                      return;
                    }
                  });
                }

                if (area) {
                  cityData.forEach(function(item, index) {
                    if (area == item.value) {
                      area = item.name;
                      return;
                    }
                  });
                }

                //                        if (country) {
                //                          address += country
                //                        }
                if (province) {
                  address += province;
                }
                if (city) {
                  address += "," + city;
                }
                if (area) {
                  address += "," + area;
                }

                _this.listArray.push({
                  label: _this.$t("message.address"),
                  value: address
                });
              } else if (key === "address") {
                _this.listArray.push({
                  label: item.label,
                  value: _this.lists["address"]
                });
              }

              if (index == 2) {
                var payMessage = "";
                var message = "";
                //console.log(item)
                //判断支付状态
                console.log(_this.lists)
                if (!!_this.lists.refundid) {
                  //有退款
                  payMessage = "/有退款";
                } else if (!!_this.lists.pay_at && !lists.refundid) {
                  //已支付
                  payMessage = "/已支付";
                } else if (
                  !!_this.lists.pay_at &&
                  !!_this.lists.refundid &&
                  !!_this.lists.invite
                ) {
                  //邀请码报名
                  payMessage = "/已支付";
                } else if (
                  !_this.lists.pay_at &&
                  !!_this.lists.refundid &&
                  !!_this.lists.invite
                ) {
                  //邀请码报名
                  payMessage = "/未支付";
                } else if (!_this.lists.pay_at) {
                  //未支付
                  payMessage = "/未支付";
                }

                //判断报名状态
                if (_this.lists.state === "normal" && !!_this.lists.pay_at) {
                  _this.icon = "success";
                  message = "报名成功";
                } else if (_this.lists.state === "normal" && !!_this.lists.invite) {
                  _this.icon = "success";
                  message = "报名成功";
                } else if (_this.lists.state === "normal") {
                  _this.icon = "info";
                  message = "报名正常";
                } else if (_this.lists.state === "waitfail") {
                  _this.icon = "warn";
                  message = `候补结束，未获得名额`;
                } else if (_this.lists.state === "wait") {
                  _this.icon = "waiting";
                  if (!!_this.lists.pos) {
                    //候补 有post人数
                    message = `候补中,前边有${_this.lists.pos}人`;
                  } else {
                    //候补 没有post人数
                    message = `候补中`;
                  }
                } else if (_this.lists.state == "draw") {
                  _this.icon = "waiting";
                  message = `等待抽签`;
                } else if (_this.lists.state === "undraw") {
                  _this.icon = "warn";
                  message = `未中签`;
                } else if (_this.lists.state === "audit") {
                  _this.icon = "waiting";
                  message = `审核中`;
                } else if (_this.lists.state === "auditfail") {
                  _this.icon = "warn";
                  message = `审核未通过(${_this.lists.refusemsg})`;
                  if (!!lists.refusemsg) {
                    message = `审核未通过`;
                  }
                }

                _this.stateMessage = message + payMessage;

                //   if (!!_this.lists&& !!!!_this.lists.invite) {
                //     var message = "报名成功/邀请码报名";
                //     this.stateMessage = message;
                //   }
                //   else if (!!_this.lists.refundid) {
                //     //有退款
                //     var message = "有退款";
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `${message}`
                //     });
                //     return;
                //   } else if (!!_this.lists.pay_at) {
                //     //未支付
                //     var message = "/已支付";
                //   } else {
                //     var message = "/未支付";
                //   }
                //   //添加状态
                //   if (_this.lists.state === "normal" && !!_this.lists.pay_at) {
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: "报名成功" + message
                //     });
                //   } else if (_this.lists.state === "normal") {
                //     // _this.listArray.push({
                //     //   label: _this.$t("message.status"),
                //     //   value: "中签" + message
                //     // });
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: "报名正常" + message
                //     });
                //   } else if (_this.lists.state === "waitfail") {
                //     //候补失败
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `候补结束，未获得名额`
                //     });
                //   } else if (_this.lists.state === "wait") {
                //     if (!!_this.lists.pos) {
                //       //候补 有post人数
                //       _this.listArray.push({
                //         label: _this.$t("message.status"),
                //         value:
                //           _this.$t("message.alternate") +
                //           "(前边有" +
                //           _this.lists.pos +
                //           "人)" +
                //           message
                //       });
                //     } else {
                //       //候补 没有post人数
                //       _this.listArray.push({
                //         label: _this.$t("message.status"),
                //         value: _this.$t("message.alternate") + message
                //       });
                //     }
                //   } else if (_this.lists.state == "draw") {
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `等待抽签` + message
                //     });
                //   } else if (_this.lists.state === "undraw") {
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `未中签(候补代码${_this.lists.wait_pos})` + message
                //     });
                //   } else if (_this.lists.state === "audit") {
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `审核中` + message
                //     });
                //   } else if (_this.lists.state === "auditfail") {
                //     _this.listArray.push({
                //       label: _this.$t("message.status"),
                //       value: `未通过审核(${_this.lists.refusemsg})` + message
                //     });
                //   }
              }

              //处理多选项的value显示问题
              if (item.type === "radio-group") {
                item.values.forEach(function(item1, index1) {
                  if (_this.lists[key] == item1.value) {
                    _this.listArray.push({
                      label: item.label,
                      value: item1.label
                    });
                  }
                });
              } else if (item.type === "sele") {
              } else if (item.type === "file") {
                //处理图片
                for (var key1 in _this.lists) {
                  if (item.name == key1) {
                    _this.listArray.push({
                      label: item.label,
                      value: _this.lists[[key1]]
                    });
                  }
                }
              } else {
                if (key == "city") {
                } else if (key == "country") {
                } else if (key == "address") {
                } else {
                  _this.listArray.push({
                    label: item.label,
                    value: _this.lists[key]
                  });
                }
              }
            }
          });
        }
      }
    },
    //获取报名表单
    _getForm() {
      let _this = this;
      //mock!!!  4号数据没有 改成5号
      /*   if (this.eventId == 4) {
         this.eventId = 5
         }*/
      //mock!!! 结束
      return getForm(`${window.host}event/show`, {
        eventid: this.eventId
      });
    },

    changeButton: function(e) {
      console.log("xxx");
      console.log(this.$refs.box);
      if (this.showContent001 == true) {
        // this.$refs.box.setAttribute("class", "list-box ");
        this.$refs.box.style.height = "90px";
        this.showContent001 = !this.showContent001;
        // console.log(this.$refs.box);
      } else if (this.showContent001 == false) {
        this.$refs.box.style.height = "auto";
        this.showContent001 = !this.showContent001;
      }
    }
  },
  components: {
    PopupPicker,
    FormPreview,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Badge,
    XButton,
    Confirm,
    XInput,
    Timeline,
    Actionsheet,
    TimelineItem
  },
  directives: {
    TransferDom
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#mylist {
  width: 100%;
}

#mylist .listbox1 {
  padding: 9px 15px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0;
  padding-bottom: 0;
}

#mylist .listbox2 {
  width: 100%;
  padding: 0;
  font-size: 0.9em;
  text-align: right;
  color: #999999;
  line-height: 2;
}

#mylist .listbox3 {
  overflow: hidden;
}

#mylist span {
  color: #999999;
}

#mylist .fl {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}

#mylist .fr {
  display: block;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
}

#mylist .border-left {
  border-left: 1px solid #ececec;
}

#mylist .border-right {
  border-right: 1px solid #ececec;
}

#message .footer {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  line-height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#message .footer.weui-cell:before {
  left: 0;
}

#message .footer .vux-cell-primary .vux-label {
  font-size: 16px;
}

#message .weui-cells .title {
  padding-top: 11px;
  padding-bottom: 11px;
  .weui-cell__ft {
    color: black;
  }
}

#message #mylist:nth-of-type(1) .weui-cells {
  margin-top: 0;
}

#message .listbox3 img {
  max-height: 80px;
  max-width: 80px;
  vertical-align: middle;
}

#message .listbox3 ul {
  float: left;
  width: 100%;
  text-align: left;
  font-size: 0;
}

#message .listbox3 ul li {
  display: inline-block;
  width: 20%;
  text-align: center;
  width: 80px;
  height: 80px;
}

.clearfix:after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

#mylist .weui-cells {
  margin-top: 0;
}
</style>

